\chapter{Радно окружење}
\label{chap:Radno okruzenje}
Свакодневни рад програмера се углавном своди на рутинске послове. Цео процес у многоме поједностављују развојна окружења која отклањају понављајуће и досадне међукораке. Условно речено, компајлирање је један од најосновнијих корака у свету програмских језика. Било да се говори о \texttt{Java}, \texttt{C} или \texttt{C++} језику, компајлирање по некада може бити и врло изазован задатак. Све већи број билиотека и њихова међусобна повезаност доводе до потребе за алатима који ће цео процес поједноставити и убрзати.

У развоју веб апликација процес припреме апликације за продукционо окружење може такође бити прожет рутинским корацима чији се број може знатно смањити коришћењем аутоматизације. Популаран \texttt{JavaScript} који се до скора извршавао само у веб прегледачима, данас уз помоћ \texttt{V8} покретача може бити извршаван самостално. Тиме је употреба \texttt{JavaScript} језика проширена, па се користи за програмирање модула, који заједно са покретачем чине \texttt{Node.js} платформу. Одржавање ових модула и њихово тестирање такође захтева одређени ниво аутоматизације.

%\texttt{Yeoman} скуп алата управо служи за аутоматизацију и поједностављивање процеса израде веб апликација.

%Поменути {\it Node.js} је у овом раду искоришћен као платформа на чијим ће се темељима базирати развојна окружења у виду пакета тј. модула. Посебно написан модул за ово окружење је NPM пакет менаџер. Овим алатом ће бити инсталирани сви други алати укључујући и \texttt{Yeoman} скуп алата.

\section{\texttt{Yeoman} алати}

Yeoman\cite{yeoman} представља колекцију три алата који заједно поједностављују и убрзавају развој веб апликација. Како се овај рад бави описом развоја веб апликација коришћењем \texttt{AngularJS} платформе, примери који следе ће бити базирани управо на њој.

У састав \texttt{Yeoman} алата улазе модули: \texttt{Yo}, \texttt{Bower} и \texttt{Grunt}. Ове технологије се заснивају на \texttt{JavaScript} језику, а намена \texttt{Node.js} окружења је пружање системских позива које ови модули користе. Сваки од ова три алата има посебан домен рада и јасно дефинисан задатак у процесу развоја једне веб апликације. Такође, сваки од њих садржи одређене фајлове подешавања.

\subsection{\texttt{Yo}}


%\begin{verbatim}
%npm install -g yo
%\end{verbatim}

%Као што је већ поменуто, NPM је пакет менаџер \texttt{Node.js} окружења. Аргументом \texttt{-g} тражи се инсталација \texttt{Yo} алата на глобалном нивоу у систему. То значи да ће сви корисници система имати приступ инсталираном пакету. Алтернатива је изостављање овог аргумента чиме ће само корисник који је покренуо команду имати приступ инсталираном пакету.

%Процедура инсталације пакета коришћењем \texttt{Node.js} пакет менаџера је допремање већ постојећег пакета са неке јавне локације на Интернету.

%Између осталих, посебно важан у кораку инсталације \texttt{Yo} пакета је следећи фајл:

%\lstinputlisting[language=JSON,caption=package.json]{primeri_koda/yo_package.json}

%Као што се може приметити, врло читљив JSON формат одмах даје на увид поља са интуитивним значењем. Значајна поља која треба истаћи су: 
%\begin{itemize}
%\item{\texttt{bin}},
%\item{\texttt{repository}},
%\item{\texttt{dependencies}},
%\item{\texttt{peerDependencies}},
%\item{\texttt{engines}}.
%\end{itemize}

%Значења ових поља су:
%\begin{itemize}
%\item{Поље {\it bin} садржи путању до извршног фајла овог пакета,}
%\item{{\it Repository} поље садржи информацију о тачној URL путањи до \texttt{GitHub} репозиторијума о чему је било речи},
%\item{{\it PeerDependencies} поље садржи имена NPM пакета који морају првобитно бити инсталирани, као и њихове верзије,}
%\item{{\it Dependencies} поље садржи имена, као и верзије пакета који ће бити инсталирани у склопу самог \texttt{Yo} пакета,}
%\item{{\it Engines} поље говори о верзијама \texttt{Node.js} окружења и \texttt{Node.js} пакет менаџера које су неопходне да би пакет несметано радио.}
%\end{itemize}
%
%{\it PeerDependencies} поље је врло интересантно јер говори да ће се \texttt{Bower} и \texttt{Grunt} пакети инсталирати као потребни, уколико већ нису инсталирани, што ће инсталацијом \texttt{Yo} пакета инсталирати цео \texttt{Yeoman} скуп алата.
%
%У досадашњем тексту термини пакет и модул су условно изједначени. У неким случајевима се чак могу назвати апликацијама што је случај са рецимо \texttt{Yo} модулом, јер је у спецификацији свог пакета дата путања до извршног фајла који ће бити коришћен за инстанцирање иницијалне верзије веб апликације.

%Погледајмо већу перспективу о начину на који {\it NPM} складишти своје апликације (модуле). Дакле, модули могу бити инсталирани на нивоу система, у директоријуму /уср/либ/ноде\_модулес, или на нивоу корисника система у ./ноде\_модулес. Сваки од модула има своју листу неопходних модула, који му омогућавају рад, тако да сваки од њих, такође садржи ноде\_модулес поддиректоријум. Угњеждавање директоријума ноде\_модулес може ићи докле год је то неопходно.

%Након инсталације \texttt{Yo} модула, фолдер {\it /usr/lib/node\_modules/} би требало да садржи \texttt{Yo}, \texttt{Bower}, \texttt{Grunt} и NPM модуле. Интересантно је напоменути да се и NPM као пакет менаџер инсталира као посебан модул \texttt{Node.js} платформе.

Инсталација \texttt{Yeoman} скупа алата се покреће једноставним инсталирањем \texttt{Yo} алата. Позивањем \texttt{Yo} алата у термналу добија се могућност инсталације жељених генератора. Генератори су посебна врста модула, која се као и \texttt{Yo} модул складиште у \texttt{Node.js}-овом {\it node\_modules} директоријуму. Оно што их одликује су шаблони у виду структуре директоријума и фајлова на основу којих ће се инстанцирати веб апликација. \texttt{Yo} алат даје могућност претраге жељеног генератора уколико он није инсталиран. У даљем раду је инсталиран \texttt{generator-angular}. Инсталација генератора \texttt{Yo} алатом идентична је инсталацији генератора {\it NPM} алатом. У случају проблема са системским дозволама, потребно је користити дозволе администратора. Оно што је битно напоменути је да се међу фајловима који долазе са \texttt{generator-angular}, долази и шаблонски фајл {\it bower.json}, на основу којег ће се допремити уобичајене библиотеке.
% Садржај овог фајла ће бити представљен и продискутован у даљем тексту.

Када је генератор \texttt{AngularJS} платформе инсталиран могуће је врло брзо инстанцирати веб апликацију. Инстанцирање веб апликације изводи се у једном кораку:

\begin{verbatim}
yо angular myApp
\end{verbatim}

%Након овог корака структура директоријума веб апликације биће следећа:

%\lstinputlisting[language=bash,label=lst:rssfeeder,caption=Садржај фолдера]{primeri_koda/folder_struc_1.txt}

Садржај директоријума је на први поглед крајње необичан. Разлог оваког изгледа је управо цела структура фолдера коју \texttt{Yeoman} модул прави. Ако би се упоредили садржаји овог директоријума и директоријума просечног веб сајта видела би се значајна разлика. Наравно, суштински важни фајлови и фолдери за веб апликацију су и овде приступачни, али је другачије осмишљена њихова организација.

%, па се налазе у поддиректоријуму {\it app}. Пре него што садржај директоријума {\it app} буде представљен, потребно је продискутовати садржај два врло важна фајла, а то су {\it bower.json} и {\it Gruntfile.js}. То су фајлови подешавања друга два алата из {\it Yeoman} групе.

\subsection{\texttt{Bower}}

\texttt{Bower} алат представља мали пакет менаџер који ради у домену веб апликације. Улога овог алата је оправдана када се погледа на начин на који се веб апликације и сајтови опремљују додатним библиотекама. Примера ради, за коришћење \texttt{jQuery} библиотеке потребно је допремити одређену верзију са званичног сајта и поставити је у одређени поддиректоријум веб апликације. Уколико постоји потреба за коришћењем више од једне библиотеке, онда се процес иницијалног подешавања апликације знатно успорава корацима који ће се врло вероватно понављати креирањем сваке следеће веб апликације. \texttt{Bower} менаџер библиотека даје листу доступних и омогућује постављање нових и уклањање нежељених. Листу инсталираних пакета прави на основу садржаја директоријума који је наведен у следећем фајлу.

\lstinputlisting[language=JSON,caption=bower.json]{primeri_koda/bowerrc}

\texttt{Bower} је такође конзолни алат и врло је интуитиван при употреби. Уколико су имена и верзије библиотека познати, након измене садржаја овог фајла опцијом освежавања из пројекта ће бити уклоњене нежељене библиотеке док ће нове бити допремљене.

Иницијални садржај \texttt{Bower}-овог конфигурационог фајла долази из генератора који је инсталиран и чијим је покретањем инстанцирана веб апликација. 

\subsection{\texttt{Grunt}}

Овај алат служи за аутоматизовано обављање задатака. Да би се његова улога боље објаснија може се упоредити функционално сличним алатима \texttt{make} и \texttt{ant}. Оба алата имају посебну синтаксу и оба служе за рутинско аутоматизовано обављање задатака када је у питању процедура припреме производа за тестирање или продукцију. Такође, користе се и када је потребно компајлирање и линковање више стотина фајлова по одређеном редоследу. На основу овога се може схватити сложеност самих пројеката и сложеност процедуре добијања извршних бинарних фајлова. Слично је и са \texttt{Grunt} алатом.

Приликом инсталације из генераторове верзије фајла {\it package.json}, инсталирају се разни \texttt{Grunt} модули. 
%Ево примера садржаја {\it package.json} фајла.

%\lstinputlisting[language=JSON,caption=package.json]{primeri_koda/project_package.json}

%Из лако читљивог JSON фајла може се видети велики број \texttt{Grunt} модула који су инсталирани у апликацији. Конкретно, ти модули су допремљени у фолдер {\it node\_modules}. Њихова примена може бити јаснија након прегледа садржаја фајла {\it Gruntfile.js}.

%\lstinputlisting[language=JSON,label=lst:rssfeeder,caption=Gruntfile.json]{primeri_koda/project_gruntfile.json}

%Због обимног садржаја није приказан цео фајл, већ само кључни делови на основу којих ће се појаснити сврха и начин употребе \texttt{Grunt} алата.

%Предавањем JSON објекта функцији {\it grunt.initConfig}, дефинише се скуп задатака које \texttt{Grunt} као алат мора да изврши. На самом почетку дефинисан је {\it watch} задатак. Сваки од задатака повезан је са истоименим \texttt{Grunt} модулом, у овом случају {\it grunt-contrib-watch}, а начин на који ће се задатак извршавати одређен је правилима из тог модула. {\it Watch} модул даје могућност константног мотрења на показане фајлове или директоријуме, и истовременог покретања жељених задатака уколико дође до промене у њима. У показаном примеру, {\it watch} задатак мотри на два домена, {\it styles} и {\it less}. Сваки од ова два домена има задату путању директоријума и фајлова на које се односи, као и задатак који ће се извршити ако дође до промене у њима.

%Домен {\it less} дефинише фајлове на које ће \texttt{Grunt} мотрити и дефинише задатак који ће се након промене у фајловима покренути. Сваки задатак може имати више подзадатака, што у овом случају јесте {\it compile}. Улога LESS фајлова и потреба за њиховим компајлирањем ће бити објашњена у следећој секцији. Оно што је битно напоменути је да и задатак {\it less} такође има свој \texttt{grunt-contrib-less} модул који очекује подешавања која су дата у опису самог задатка.

%Задатак {\it less}, састоји се од подзадатка {\it compile} који садржи име фајла екстензије {\it less} који ће бити компајлиран и путању где ће се резултујући CSS фајл сместити.

%Сличан поступак је и са мотрењем на домен {\it styles}. Овде се уводи посебна замена, {\it <\%= yeoman.app \%>}, која има улогу скраћивања самог кода и лаког преправљања. Ова линија се приликом извршавања скрипте замењује вредношћу коју садржи објекат {\it yeomanConfig} који је дефинисан на самом почетку представљеног фајла. Може се видети да после измене на неким од фајлова стилова следи извршавање задатка {\it copy}, и подзадатка {\it styles}, који копира фајлове стилова са једне локације на другу.

%Приметимо како и цопy задатак има одговарајући {\it Grunt} модул из пацкаге.јсон фајла.

%На крају {\it Gruntfile.js} фајла сви дефинисани задаци формирају групе које корисник одређује из конзоле. Овде је представљена група {\it build}. Као што и сам назив говори, ова група задатака ће се извршавати сваки пут када корисник покрене {\it grunt build}. 

Улоге \texttt{Grunt} модула могу бити врло просте, од копирања и премештања фајлова, до извршавања замене садржаја по регуларним изразима и покретањем интерпретера за различите скрип фајлове. Начин на који се ови модули могу користити је врло једноставан и углавном објашњен на веб страницама аутора модула.
%Кораке који су укључени у ову групу нећемо понаособ проучавати, пошто се углавном тичу преуређивања садржаја фајлова и њиховог спремања за продукционо окружење.

\section{Алати за дизајн веб апликација}
У свакодневном животу па и у сфери информационих технологија, пословање је условљено једном простом чињеницом - први утисак је најбитнији. Може се са сигурношћу рећи да је већи део посла завршен ако је циљној групи добро презентована материја о којој се води реч. Зато ни најмање нису непотребни сати припремања презентација и говора који ће бити коришћени пред великим бројем људи. 

Ту се може повући паралела и са дизајном веб сајтова и апликација. До недавно веб сајт је био додатна опција пословању неке компаније, и као алтернатива није на себи носио потпуни терет маркетинга. Међутим, у врло кратком временском периоду ситуација се потпуно изменила. Данас се пословање неке организације и њен маркетинг не сматрају озбиљним уколико та организација нема веб страницу која даје општи опис делатности којима се та организација бави.

Стављајући тако важан задатак презентацији и маркетингу на Интернету, дизајн веб сајтова и веб апликација је протекле деценије веома узнапредовао. Одговорност за начин на који се садржај презентује је са HTML-а пребачена на CSS, док је за визуални угођај коришћен \texttt{JavaScript} и технологије засноване на њему.

%У скоријим верзијама {\it CSS} стандарда, неке од функционалности које је {\it JavaScript} омогућавао су имплементиране, тако да се прилично добар визуелни угођај може добити и комбиновањем само ХТМЛ-а и ЦСС-а верзије 3.

\subsection{CSS и LESS}

Филозофија доброг структуирања CSS кода и начина на који се сам код пише је отишла толико далеко да данас постоје скрипт језици који имају сличну синтаксу као сам CSS, али са олакшицама, тако да се програмеру остави што више простора за писање прегледнијег кода. Такође, ту је битан фактор читање и преправка CSS кода, који код великих сајтова или апликација мора бити раздељен у чак више десетина фајлова. Руковање овим фајловима је знатно олакшано скрипт језицима, међу које убрајамо и LESS, који је коришћен у овом раду. LESS захтева свој интерпретер, који је у ствари \texttt{JavaScript} \texttt{Node.js} модул, и који ће бити презентован у следећем примеру.

\lstinputlisting[language=CSS,label=lst:rssfeeder,caption=Primer.less]{primeri_koda/less_primer.less}

Садржај представљеног фајла се може одвојити у две целине: конфигурабилни део и део са спецификацијом конкретних стилова.

Као што се може видети, LESS даје могућност дефинисања варијабли коришћењем префикса {\it @}. Програмери који се баве уређивањем стилова ће ово препознати као значајно унапређење које даје читљивији код и могућност бржих измена. Друга погодност коју нуди LESS је груписање стилова у нешто што подсећа на функцију. Као пример се може узети {\it .vpadding} група. Аргумент ове групе је променљива {\it @а}, која има постављену вредност на $0px$, уколико се при позиву групе не зада жељена вредност. Ова група ће при позиву додати стилове који се налазе унутар ње и то са жељеном вредношћу параметра {\it @а}. Слична је функција и група {\it .botradius} и {\it .topradius}. Група {\it .radius} представља још један начин на који се групе стилова могу користити. У овом случају она комбинује две претходно наведене групе.

Други део LESS фајла је спецификација стилова. Овде се може приметити угњеждавање, које доприноси чистом и прегледном коду који се лако може модификовати. Хијерархија која се угњеждавањем стилова у LESS фајлу добија такође даје програмеру начин да прецизније одреди путању до DOM елемента на који се примењује дефинисани стил.

Одговарајући CSS фајл добијен компајлирањем LESS фајла је наведен у наставку.

\lstinputlisting[language=CSS,label=lst:rssfeeder,caption=Primer.less]{primeri_koda/less_primer_2.less}

Део са дефиницијама променљивих и група стилова је изостављен, јер није ни потребан у CSS фајлу. Угњеждавањем је добијена дефиниција стилова која је прегледнија. Најбитнија ствар је да преправке у LESS фајлу могу бити значајно мање и самим тим време модификације значајно краће. Наведено свакако иде у прилог коришћења LESS фајлова и компајлера. Основни пример би могао бити преправка боја, која би у CSS фајлу захтевала преправке по свим одговарајућим линијама, док се у LESS фајлу преправка може свести на једну линију кода.

LESS као врло заступљен формат у сфери веб дизајна нуди још изузетних погодности које због теме рада овде нису представљене и објашњене. Разлог за коршићење LESS синтаксе у овом раду је све већа популарност и брзина стилизовања веб страница. Платформа која је коришћена у раду је \texttt{Bootstrap} са својим LESS стиловима.

\subsection{\texttt{Twitter Bootstrap}}

Чланови развојног тима познате друштвене мреже \texttt{Twitter} су, имајући у виду развој мобилних технологија и коришћење њихове веб апликације на широком спектру резолуција мобилних уређаја, развили \texttt{Bootstrap} платформу која се састоји од скупа CSS фајлова који се добијају компајлирањем групе LESS фајлова уз помоћ \texttt{Node.js} окружења. Погодност коју \texttt{Bootstrap} као платформа нуди је све распрострањенији респонзивнији дизајн. Респонзивност као груби превод енглеске речи {\it responsive} може на нашем језику бити објашњена као ажурност или реаговање. У контексту веб дизајна, реаговање би се односило на прилагођавање резолуцији на којој се веб страница приказује. Уз помоћ \texttt{jQuery} библиотеке и CSS-а верзије 3, анимације прилагођавања могу бити врло привлачне за око корисника и тиме у многоме повећати кориснички угођај. Једноставност и брзина имплементације коју са собом носи \texttt{Bootstrap} се могу најбоље приказати посетом званичном сајту и репрезентативно направљеним веб страницама које су понуђене у примерима.

Услед немогућности приказивања респонзивности, овде ће бити приказан HTML код и одговарајући изглед веб странице како би се показала ефективност коришћења \texttt{Bootstrap} платформе.

\lstinputlisting[language=HTML5,caption=index.html]{primeri_koda/index_primer.html}

Пре приказа изгледа веб странице треба истаћи да је у потпуности стилизована коришћењем \texttt{Bootstrap} платформе и да нема додатних CSS фајлова.

\begin{figure}[H]
	\centering
	\includegraphics[scale=0.6]{slike/index_primer.png}
	\caption{Изглед веб странице постигнут коришћењем \texttt{Bootstrap} платформе}
\end{figure}


